<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset='utf-8' />
    <title>点实体绘制</title>
    <!--引用第三方的jQuery脚本库-->
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <!--引用Cesium脚本库文件-->
    <script src="./static/libs/include-cesium-local.js"></script>
    <!--引用示例页面样式表-->
    <link rel="stylesheet" href="./static/demo/cesium/style.css" />
    <script>
        //在JS脚本开发中使用严格代码规范模式，及时捕获一些不规范的行为，从而避免编程错误
        'use strict';

        //定义三维场景控件对象
        var webGlobe;

        //加载三维场景
        function init() {
            //构造三维视图对象（视图容器div的id，三维视图设置参数）
            webGlobe = new Cesium.WebSceneControl('GlobeView', {});

            //构造视图功能管理对象（视图）
            var sceneManager = new CesiumZondy.Manager.SceneManager({
                viewer: webGlobe.viewer
            });
            //设置鼠标位置信息展示控件：经纬度、高程、视角高度（容器div的id）
            sceneManager.showPosition('coordinate_location');

            //构造第三方图层对象
            var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({
                viewer: webGlobe.viewer
            });
            //加载天地图
            var tdtLayer = thirdPartyLayer.appendTDTuMap({
                //天地图经纬度数据
                url: 'http://t0.tianditu.com/DataServer?T=vec_c&X={x}&Y={y}&L={l}',
                //开发token （请到天地图官网申请自己的开发token，自带token仅做功能验证随时可能失效）
                token: "9c157e9585486c02edf817d2ecbc7752",
                //地图类型 'vec'矢量 'img'影像 'ter'地形
                ptype: "img"
            });

            //视点跳转（经度，纬度，视角高度，跳转持续时间）
            sceneManager.flyTo(114.28930528613337, 30.546849344910772, 10000, 1);

            //添加点
            add();
        }

        //添加点
        function add() {
            //定义点对象
            var point1, point2, point3, point4;

            //填充颜色
            var fillColor = new Cesium.Color(255 / 255, 255 / 255, 0 / 255, 1);
            //边线颜色
            var outLineColor = new Cesium.Color(255 / 255, 0 / 255, 0 / 255, 1);

            //构造几何绘制控制对象
            var entityController = new CesiumZondy.Manager.EntityController({
                viewer: webGlobe.viewer
            });
            //添加点实体：经度、纬度、高程、名称、大小（像素单位）、颜色、外边线颜色、边线宽度
            point1 = entityController.appendPoint(
                114.30252625376454, 30.544631482624357, 20,
                '黄鹤楼',
                12,
                fillColor,
                outLineColor,
                2
            );
            point2 = entityController.appendPoint(114.31626066824627, 30.52940417011761, 0, '武昌火车站', 12, fillColor, outLineColor, 2);
            point3 = entityController.appendPoint(114.24160138541689, 30.54074917505938, 0, '动物园', 12, fillColor, outLineColor, 2);
            //方法二：添加点通用方法，对接Cesium原生，可设置更多属性
            point4 = entityController.appendPointComm(
                //经度、纬度、高程
                114.28478689925817, 30.555691346035022, 0,
                //名称、描述
                '晴川阁', "晴川阁景点",
                //附加属性：像素大小、颜色、外边线颜色、边线宽度
                {
                    pixelSize: 12,
                    color: fillColor,
                    outlineColor: outLineColor,
                    outlineWidth: 2
                }
            );
        }
    </script>
</head>

<body onload="init()">
    <!--三维场景容器-->
    <div id='GlobeView'></div>
    <!--位置信息容器-->
    <div id="coordinateDiv" class="coordinateClass">
        <label id="coordinate_location"></label>
    </div>
</body>

</html>